<template>
    <div>
        <div class="todo-container">
            <div class="todo-wrap">
                <!-- 自定义事件 -->
                <TodoHeader @addTodo="addTodo"></TodoHeader>
                <TodoList :todos="todos"/>
                <TodoFooter :todos="todos"
                            :deleteCompleteTodos="deleteCompleteTodos"
                            :selectAllTodos="selectAllTodos"/>
            </div>
        </div>

        <br>
        <hr>
        <h4>【测试 Ajax [axios]】</h4>
        <AjaxTest/>

        <br>
        <hr>
        <h4>【Router Test】</h4>
        <div class="row">
            <div class="col-xs-2 col-xs-offset-2">
                <div class="list-group">
                    <router-link to="/home" class="list-group-item">Home</router-link>
                    <br>
                    <router-link to="/about" class="list-group-item">About</router-link>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="panel">
                    <div class="panel-body">
                        <keep-alive>
                            <router-view msg="abc"></router-view>
                        </keep-alive>
                    </div>
                </div>
            </div>
        </div>
        <hr>
    </div>
</template>

<script>
    /* npm install --save pubsub-js */
    import PubSub from "pubsub-js";
    import TodoHeader from "./components/TodoHeader";
    import TodoList from "./components/TodoList";
    import TodoFooter from "./components/TodoFooter";
    import TodoUtil from "./utils/todoutil";
    import AjaxTest from "./components/AjaxTest";

    export default {
        name: 'app',
        components: {
            AjaxTest,
            TodoFooter,
            TodoList,
            TodoHeader
        },
        data() {
            return {
                todos: TodoUtil.getTodos()
            }
        },
        mounted() {
            // 这里的函数必须使用箭头函数，如果使用 function(msg, index) 的话，this 会指向 PubSub
            // 经验：基本上函数都是用箭头函数就没什么问题
            PubSub.subscribe("deleteTodo", (msg, index) => {
                this.deleteTodo(index)
            })
        },
        methods: {
            addTodo(todo) {
                this.todos.unshift(todo)
            },
            //使用发布订阅的方式删除任务
            deleteTodo(index) {
                this.todos.splice(index, 1)
            },
            // 删除选中的
            deleteCompleteTodos() {
                this.todos = this.todos.filter(todo => !todo.status)
            },
            selectAllTodos(check) {
                this.todos.forEach(todo => todo.status = check)
            }
        },
        watch: {
            todos: {
                //深度监听
                deep: true,
                // 这里的handler 有个简写
                /*handler: function (value) {
                    //保存JSON数据到制定 Key
                    TodoUtil.saveTodos(value)
                },*/
                handler: TodoUtil.saveTodos
            }
        }
    }
</script>

<style>
    .todo-container {
        width: 600px;
        margin: 0 auto;
    }

    .todo-container .todo-wrap {
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
    }
</style>
